import React, { useState, useEffect } from "react";
import "../../scss/sdk/booking.scss";
import { NavBar } from "react-vant";
import { useNavigate } from "react-router-dom";
import { Input, Cascader, DatePicker, Radio, Checkbox, Button } from "antd";
import { hooks } from "react-vant";
import { Arrow } from "@react-vant/icons";
import axios from "axios";
import { useLocation } from "react-router-dom";

export default function Booking_add() {
  let Navigate = useNavigate();
  let Location = useLocation();
  let [fangdong, setfangdong] = useState('');
  let item = Location.state.item;
  //表单数据
  const [state, updateState] = hooks.useSetState({
    person: "",
    phone: "",
    look_time: "",
    say: "",
    hid: Location.state.item._id,
    uid: item.lid,
  });
  useEffect(() => {
    getfangdong();
  }, []);
  //查看房东
  let getfangdong = async () => {
    let { data } = await axios.get("http://localhost:3000/sdk/fangdong", {
      params: {
        _id: item.lid,
      },
    });
    console.log(data.fangdong);
    setfangdong(data.fangdong.name);
  };
  //看房时间
  const skdDate = (date, dateString) => {
    updateState({ look_time: dateString });
  };

  let butsclick = (name) => {
    console.log(name);
    updateState({
      say: name,
    });
  };

  let booking_add = async () => {
    let { data } = await axios.post(
      "http://localhost:3000/sdk/booking_add",
      state
    );
    console.log(data);
    updateState({
      person: "",
      phone: "",
      look_time: "",
      say: "",
      hid: Location.state.item._id,
      uid: Location.state.item.lid,
    });
  };



  return (
    // <div></div>
    <div className="booking_add">
      {/* 头部导航 */}
      <div
        style={{
          position: "sticky",
          top: "0px",
          backgroundColor: "white",
          // zIndex: '100',
        }}
      >
        <NavBar
          title="预约看房"
          onClickLeft={() => {
            Navigate(-1);
          }}
        />
      </div>
      {/* 房屋信息 */}
      <div
        style={{
          backgroundColor: "white",
          width: "100%",
          height: "180px",
        }}
      >
        <div className="booking_add_top">
          <img src="./aaa5.png" alt="" />
          <div
            style={{
              marginLeft: "10px",
              width:'160px',
              overflow:'hidden',
            }}
          >
            <div>{item.classfy} | {item.city}/{item.plot}</div>
            <div
              style={{
                color: "#7F7F7F",
                fontSize: "13px",
              }}
            >
              <div>{item.house_type}/{item.house_area ? item.house_area : "暂无数据"}平米 </div>
              <div>{item.price}/月</div>
            </div>
          </div>
        </div>
        <div className="booking_add_bottom">
          <div
            style={{
              display: "flex",
              alignItems: "center",
            }}
          >
            <img src="./刘.jpg" alt="" />
            <div
              style={{
                marginLeft: "10px",
              }}
            >
              <div>{fangdong}</div>
              <div
                style={{
                  color: "#7F7F7F",
                  fontSize: "13px",
                }}
              >
                个人房东
              </div>
            </div>
          </div>
          <div
            style={{
              color: "#7F7F7F",
              fontSize: "13px",
            }}
          >
            信用良好： <span style={{ color: "black" }}>70分</span>
          </div>
        </div>
      </div>

      {/* 表单数据 */}
      <div
        style={{
          padding: "15px",
          backgroundColor: "white",
          paddingLeft: "13px",
        }}
      >
        {/* 预约人 */}
        <div className="sdkaddbox1-1">
          <div className="sdkaddbox1-1-1">
            预约人
            <sup style={{ color: "red", fontSize: "15px" }}>*</sup>
          </div>
          <div>
            <Input
              style={{
                width: "225px",
                height: "50px",
                backgroundColor: "#F5F5F5",
                borderRadius: "10px",
                paddingLeft: "10px",
                display: "flex",
                justifyContent: "space-between",
                alignItems: "center",
                border: "none",
              }}
              placeholder="请输入房间面积/平米"
              value={state.person}
              onChange={(person) =>
                updateState({ person: person.target.value })
              }
            />
          </div>
        </div>
        {/* 练习手机 */}
        <div className="sdkaddbox1-1">
          <div className="sdkaddbox1-1-1">
            联系手机
            <sup style={{ color: "red", fontSize: "15px" }}>*</sup>
          </div>
          <div>
            <Input
              style={{
                width: "225px",
                height: "50px",
                backgroundColor: "#F5F5F5",
                borderRadius: "10px",
                paddingLeft: "10px",
                display: "flex",
                justifyContent: "space-between",
                alignItems: "center",
                border: "none",
              }}
              placeholder="请输入房间面积/平米"
              value={state.phone}
              onChange={(phone) => updateState({ phone: phone.target.value })}
            />
          </div>
        </div>
        {/* 看房时间 */}
        <div className="sdkaddbox1-1">
          <div className="sdkaddbox1-1-1">
            看房时间
            <sup style={{ color: "red", fontSize: "15px" }}>*</sup>
          </div>
          <div
            style={{
              width: "225px",
              height: "50px",
              backgroundColor: "#F5F5F5",
              borderRadius: "10px",
              paddingLeft: "10px",
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center",
            }}
          >
            <DatePicker
              onChange={skdDate}
              style={{
                width: "100%",
                border: "none",
                backgroundColor: "#F5F5F5",
              }}
            />
            <Arrow
              style={{
                marginLeft: "50px",
              }}
            />
          </div>
        </div>

        {/* 想找房东说 */}
        <div
          style={{
            marginTop: "30px",
          }}
        >
          <div>想找房东说</div>
          <div
            style={{
              marginLeft: "10px",
              marginTop: "10px",
            }}
          >
            <button
              style={{
                marginRight: "5px",
                padding: "5px",
                border: "none",
                backgroundColor: "#F7F7F7",
                cursor: "pointer",
                borderRadius: "10px",
                fontSize: "13px",
              }}
              onClick={() => {
                butsclick("可以改时间");
              }}
            >
              可以改时间
            </button>
            <button
              style={{
                marginRight: "5px",
                padding: "5px",
                border: "none",
                backgroundColor: "#F7F7F7",
                cursor: "pointer",
                borderRadius: "10px",
                fontSize: "13px",
              }}
              onClick={() => {
                butsclick("着急找房");
              }}
            >
              着急找房
            </button>
            <button
              style={{
                marginRight: "5px",
                padding: "5px",
                border: "none",
                backgroundColor: "#F7F7F7",
                cursor: "pointer",
                borderRadius: "10px",
                fontSize: "13px",
              }}
              onClick={() => {
                butsclick("有宠物");
              }}
            >
              有宠物
            </button>
          </div>
        </div>
      </div>

      {/* 底部按钮 */}
      <div
        style={{
          width: "100%",
          position: "fixed",
          bottom: "10px",
          textAlign: "center",
        }}
      >
        <Button
          style={{
            backgroundColor: "#F57C00",
            width: "80%",
            height: "40px",
            color: "white",
            fontSize: "16px",
          }}
          onClick={() => {
            booking_add();
          }}
        >
          立即预约
        </Button>
      </div>
    </div>
  );
}
